<template>
  <div>
    <v-title></v-title>
    <!-- 当购物车没有数据的时候出现的东西 -->
    <div v-show="shoplist == null">
      <van-empty description="暂无数据,快去逛逛吧!" />
    </div>

    <!-- 详细数据 -->
    <ul class="shoplist">
      <li v-for="(item, index) in shoplist" :key="item.id">
        <input type="checkbox" v-model="item.isSelect" @change="choose" />
        <img :src="item.img" />
        <div>
          <h2 :title="item.goodsname">{{ item.goodsname }}</h2>
          <p>￥{{ item.price }}</p>
          <button class="button" @click="reduce(item.id, index)">-</button>
          <span class="num">{{ item.num }}</span>
          <button class="button" @click="add(item.id, index)">+</button>
          <van-button type="danger" @click="del(item.id)">删除</van-button>
        </div>
      </li>
    </ul>

    <!-- 底部的全选和价格结算 -->
    <van-submit-bar
      :price="shoplist == null ? 0 : price * 100"
      button-text="提交订单"
      @submit="goSub"
    >
      <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
    </van-submit-bar>

    <div id="cc"></div>
  </div>
</template>



<script>
import { getcartlist, cartedit, cartdelete, orderadd } from "../request/app";
export default {
  data() {
    return {
      // 这是数据
      shoplist: [],
      // 这是全选框
      checked: false,
    };
  },
  methods: {
    // 单选按钮
    choose() {
      this.checked = this.shoplist.every((val) => val.isSelect);
    },
    // 这是点击全选按钮
    all() {
      if (this.shoplist != null) {
        this.shoplist.forEach((value) => {
          value.isSelect = this.checked;
        });
      }
    },
    // 点击减数量
    reduce(id, index) {
      // 当数量为1 的时候  就不能在减
      if (this.shoplist[index].num <= 1) {
        this.shoplist[index].num = 1;
        return;
      }
      // 让数量减少
      cartedit({
        id,
        type: 1,
      });

      // 再次获取购物车数据,把更改后的num传给原有的数据中
      getcartlist({
        uid: localStorage.getItem("info")
          ? JSON.parse(localStorage.getItem("info")).uid
          : undefined,
      }).then((val) => {
        if (val.list[index].num <= 1) {
          val.list[index].num = 1;
        }
        this.shoplist[index].num = val.list[index].num;
      });
    },
    // 点击加数量
    add(id, index) {
      cartedit({
        id,
        type: 2,
      });
      // 再次获取购物车数据,把更改后的num传给原有的数据中
      getcartlist({
        uid: localStorage.getItem("info")
          ? JSON.parse(localStorage.getItem("info")).uid
          : undefined,
      }).then((val) => {
        this.shoplist[index].num = val.list[index].num;
      });
    },
    // 点击删除
    del(id) {
      cartdelete({ id });
      // 再次获取购物车数据,把更改后的num传给原有的数据中
      getcartlist({
        uid: localStorage.getItem("info")
          ? JSON.parse(localStorage.getItem("info")).uid
          : undefined,
      }).then((val) => {
        this.shoplist = val.list;
        this.$router.go(0);
      });
    },
    // 点击确认订单按钮
    goSub() {
      if (this.shoplist == null) {
        this.$toast("购物车暂无商品哦~~ 快去抢购吧！！");
        return;
      }
      // 只要有一个选中就让提交
      if (this.shoplist.some(item => item.isSelect)) {
       let arr= this.shoplist.filter(val => {
          return val.isSelect
        });
        
        localStorage.setItem('cartinfo',JSON.stringify(arr));
        localStorage.setItem('price',this.price);
        this.$router.push("/order");

        // | uid         | 1    | String          | 50   | 用户ID       | 用户编号，必填                |
        // | ----------- | ---- | --------------- | ---- | ------------ | ----------------------------- |
        // |  countmoney  | 1    | decimal（10,2） | 10   | 支付金额     | 保留两位小数点，必填          |
        // | countnumber | 1    | number          | 5    | 购买商品数量 | 必填                          |
        // | addressid   | 1    | number          | 1    | 收获地址id   | 必填                          |
        // | idstr       | 1    | String          | 20   | 购物车数据id | 必须为字符串如：“1,2,3”, 必填 |
      } else {
        this.$toast("您还没有选择商品哦~");
      }
    }
  },
  mounted() {
    // 获取购物车数据
    getcartlist({
      // 这是uid
      uid: localStorage.getItem("info")
        ? JSON.parse(localStorage.getItem("info")).uid
        : undefined,
    }).then((val) => {
      if (val.list) {
        val.list.map((val) => this.$set(val, "isSelect", false));
      } else {
        val.list = null;
      }
      this.shoplist = val.list;
    });
  },
  computed: {
    // 这是计算所有选中的价格
    price() {
      let num = 0;
      this.shoplist.forEach((val) => {
        if (val.isSelect) {
          num += val.price * val.num;
        }
      });
      return num;
    },
    // 所有数量
    allNum() {
      let sum = 0;
      this.shoplist.forEach((item) => {
        if (item.isSelect) {
          sum += item.num;
        }
      });
      return sum;
    },
    allId() {
      let str = "";
      this.shoplist.forEach(item => {
        if (item.isSelect) {
          str += "," + item.id;
        }
      });
      return str.slice(1);
    },
  }
};
</script>


<style scoped lang="less">
#cc {
  width: 100%;
  height: 0.6rem;
  background: #fff;
}
.shoplist {
  li {
    height: 2.3rem;
    display: flex;
    margin: 0.2rem auto;
    input {
      width: 0.2rem;
      height: 0.2rem;
      margin-top: 1.05rem;
      margin-left: 0.2rem;
    }
    img {
      width: 2.3rem;
      height: 2.3rem;
      margin: 0 0.2rem;
    }
    h2 {
      width: 4rem;
      margin-top: 0.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p {
      font-size: 0.24rem;
      color: #ff6700;
      margin: 0.2rem 0;
    }
    .button {
      width: 0.6rem;
      height: 0.4rem;
      font-size: 24px;
    }
    .num {
      margin: 0 0.2rem;
      font-size: 0.3rem;
      color: #ccc;
      position: relative;
      top: 0.04rem;
    }
    .van-button {
      float: right;
    }
  }
}
.van-submit-bar {
  bottom: 0.5rem;
  .van-submit-bar__text {
    font-size: 0.2rem;
  }
}
</style>